<template lang="html">
    <section class="home">
      <div class="header">
        <h1>大数据作战平台-资源概况</h1>
      </div>
      <div class="container">
        <!-- 左区域 -->
        <div class="left">
          <panel class='guest' title='国内旅客'>
            <div class="countArea">
              <div class="counts">
                <p>历史总量<span>(人次/个)</span>：<span class="num">{{formatNum(guestData.all)}}</span></p>
                <p>{{guestData[leftTopData].xName}}新增<span>(人次/个)</span>：<span class="num">{{formatNum(guestData[leftTopData].inc)}}</span></p>
              </div>
              <div class="radios">
                <el-radio-group v-model="leftTopData">
                  <el-radio label="week">近7天</el-radio>
                  <el-radio label="month">近30天</el-radio>
                  <el-radio label="year">本年</el-radio>
                </el-radio-group>
              </div>
            </div>
            <left-line chartId='left_line' :options='guestData[leftTopData]'></left-line>
          </panel>
          <panel class='internet' title='网吧上网人员'>
            <div class="countArea">
              <div class="counts">
                <p>历史总量<span>(人次/个)</span>：<span class="num">{{formatNum(internetData.all)}}</span></p>
                <p>{{internetData[leftcenterData].xName}}新增<span>(人次/个)</span>：<span class="num">{{formatNum(internetData[leftcenterData].inc)}}</span></p>
              </div>
              <div class="radios">
                <el-radio-group v-model="leftcenterData">
                  <el-radio label="week">近7天</el-radio>
                  <el-radio label="month">近30天</el-radio>
                  <el-radio label="year">本年</el-radio>
                </el-radio-group>
              </div>
            </div>
            <center-line chartId='center_line' :options='internetData[leftcenterData]'></center-line>
          </panel>
          <panel class='transport' title='汽运购票'>
            <right-charts chartId='right_charts' :options='transportData'></right-charts>
          </panel>
        </div>
        <!-- 中间区域 -->
        <div class="center">
          <panel class='maps' title='常住人口'>
            <div class="title">
              <div class="descript">
                <span>全市常住人口/人</span>
              </div>
              <div class="counts">{{personData.all}}</div>
            </div>
            <div class="mapArea">
              <span class="kaiping">{{personData.kaiping}}<span class='unit'>(万)</span></span>
              <span class="enping">{{personData.enping}}<span class='unit'>(万)</span></span>
              <span class="taishan">{{personData.taishan}}<span class='unit'>(万)</span></span>
              <span class="heshan">{{personData.heshan}}<span class='unit'>(万)</span></span>
              <span class="xinhui">{{personData.xinhui}}<span class='unit'>(万)</span></span>
              <span class="jianghai">{{personData.jianghai}}<span class='unit'>(万)</span></span>
              <span class="pengjiang">{{personData.pengjiang}}<span class='unit'>(万)</span></span>
            </div>
          </panel>
          <panel class="busData" title='全市过车数据'>
            <buttom-charts chartId='buttom_charts' :options='busData'></buttom-charts>
          </panel>
        </div>
        <!-- 右区域 -->
        <div class="right">
          <panel class="resources" title='资源概况'>
            <ul class="resList">
                <li class="item restype">
                    <p class='num'>{{restype}}</p>
                    <p class='small'>(类)</p>
                    <div class="lf_animation"></div>
                    <div class="rt_animation"></div>
                    <div class="no_animation"></div>
                    <p class="des">资源总类统计</p>
                </li>
                <li class="item rescounts">
                    <p class='num'>{{(rescounts/100000000).toFixed(1)}}</p>
                    <p class='small'>(亿)</p>
                    <div class="lf_animation"></div>
                    <div class="rt_animation"></div>
                    <div class="no_animation"></div>
                    <p class="des">资源总量统计</p>
                </li>
                <li class="item resnew">
                    <p class='num'>{{resnew.value}}</p>
                    <p class='small'>({{resnew.unit}})</p>
                    <div class="lf_animation"></div>
                    <div class="rt_animation"></div>
                    <div class="no_animation"></div>
                    <p class="des">资源总量昨日新增</p>
                </li>
            </ul>
          </panel>
          <panel class="top5" title='资源日更新前五'>
            <div class="tableContainer">
              <res-table :tableDatas='tableData'></res-table>
            </div>
          </panel>
          <panel class="cases" title='近30天警情'>
            <res-pie chartId='resources' :options='caseData'></res-pie>
          </panel>
        </div>
      </div>
    </section>
</template>

<script>
// import
import Panel from '../components/panal.vue'
//echart图表
import leftLine from '../components/data-echarts/left/leftarea-line.vue'
import centerLine from '../components/data-echarts/left/centerarea-line.vue'
import rightCharts from '../components/data-echarts/left/rightarea-charts.vue'
import buttomCharts from '../components/data-echarts/center/bottomarea-charts.vue'
import resPie from '../components/data-echarts/right/resource-pie.vue'
//表格
import resTable from '../components/data-table/right-table.vue'
//api
import {tableApi,resourceApi,kakouApi} from '../api/api'

export default {
  components : {
    Panel,
    leftLine,
    centerLine,
    rightCharts,
    buttomCharts,
    resTable,
    resPie
  },
  data(){
    return {
      //单选框组选择
      leftTopData : 'week',
      leftcenterData : 'week',
      flag : true,
      //警情案翻译
      translate :{
        "01" : '违法犯罪案件',
        "02" : '治安事件',
        "03" : '火灾事故',
        "04" : '交通事故',
        "05" : '交通违章',
        "06" : '治安灾害事故',
        "07" : '灾害事故',
        "08" : '自杀',
        "09" : '纠纷',
        "10" : '公民求助',
        "11" : '走失寻人',
        "12" : '警务监督',
        "xx" : '其他警情'
      },
      //国内旅客
      guestData : {
        all : 69979756,
        week : {
          xName : '近7天',
          xData : ['6-26', '6-27', '6-28', '6-29', '6-30','7-1','7-2'],
          optionData : [100, 130, 140, 100, 90, 110, 130],
          inc : 43092,
        },
        month : {
          xName : '近30天',
          xData : ['1', '2', '3', '4', '5', '6', '7'],
          optionData : [150, 90, 120, 200, 110, 50, 190],
          inc : 2843,
        },
        year : {
          xName : '本年',
          xData : ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'],
          optionData : [45, 125, 36, 87, 123, 200, 210, 120, 190, 150, 150, 90],
          inc : 85654,
        },
      },
      //网吧上网人员
      internetData : {
        all : 103091566,
        week : {
          xName : '近7天',
          xData : ['6-26', '6-27', '6-28', '6-29', '6-30','7-1','7-2'],
          optionData : [130, 110, 92, 120, 110, 120, 80],
          inc : 368903,
        },
        month : {
          xName : '近30天',
          xData : ['1', '2', '3', '4', '5', '6', '7'],
          optionData : [150, 90, 120, 200, 110, 50, 190],
          inc : 2843,
        },
        year : {
          xName : '本年',
          xData : ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'],
          optionData : [45, 125, 36, 87, 123, 200, 210, 120, 190, 150, 150, 90],
          inc : 85654,
        },
      },
      //汽运购票
      transportData : {
        date : ['6-26', '6-27', '6-28', '6-29', '6-30','7-1','7-2'],
        allData : [10215188, 9215188, 11215188, 9515188, 9715188, 12215188, 10215188],
        insideData : [8221748, 7521748, 10221748, 7021748, 8221748, 10221748, 8221748],
        outsideData : [2393440, 1793440, 1093440, 2293440, 1593440, 2093440, 2393440]
      },
      //全市过车数据
      busData : {
        date : [],
        allData : [10215188, 9215188, 8215188, 9515188, 9715188, 12215188, 10215188],
        insideData : [8221748, 7521748, 7221748, 7021748, 8221748, 10221748, 8221748],
        outsideData : [2393440, 1793440, 1093440, 2293440, 1593440, 2093440, 2393440]
      },
      // 常住人口
      personData : {
        all : 4246730,
        kaiping : 73.6,
        enping : 53.7,
        taishan : 104.7,
        heshan : 39.9,
        xinhui : 59.6,
        jianghai : 17.9,
        pengjiang : 53.8,
      },
      // 表格数据-资源日更新前五量
      tableData : [
        { type : '全国在逃人员移交信息-增量',value:369402},
        { type : '全国在逃人员信息-增量',value:324201},
        { type : '全国在逃人员涉及案件信息-增量',value:290353},
        { type : '全国在逃人员照片信息-全量',value:250023},
        { type : '全国在逃人员照片信息-增量',value:203452},
      ],
      //近30天警情
      caseData : {
        legend : ['交通事故','交通违章','违法犯罪案件','治安事件','公民求助','其他警情'],
        data : [
          {value : 45658,name:'交通事故'},
          {value : 2581,name:'交通违章'},
          {value : 349,name:'违法犯罪案件'},
          {value : 2137,name:'治安事件'},
          {value : 7784,name:'公民求助'},
          {value : 19238,name:'其他警情'},
        ]
      },
      //资源概况
      restype : 166,
      rescounts : 0,
      resnew : {
        value :  (88483/10000).toFixed(1), unit : '万'
      }
    }
  },
  methods : {
    formatNum(n){
       var b=parseInt(n).toString();
       var len=b.length;
       if(len<=3){return b;}
       var r=len%3;
       return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(",");
     },
     formatfloat(v,len=1,split=',')
     {
       split=split||",",len=Math.abs((+len)%20||2);
        v = parseFloat((v + "").replace(/[^\d\.-]/g, "")).toFixed(len) + "";
       return v.replace(/\d+/,function(v){
            var lit = v.length%3==0;
            var index = lit?v.length-3:-1;
            return v.split('').reverse().join('').replace(/\d{3}/g, function(k,l) {
               return k + ((l==index&&lit)?"":split);
           }).split('').reverse().join('')
            }
        );
     },
    //国内旅客和网吧人员
    getleftLinedata(tableName,data){

      tableApi(tableName).then((res) => {
        if(Object.keys(res.data.data).length <= 0) return;
        data.week.xData = [];//重置
        data.week.optionData = [];//重置
        data.month.xData = [];//重置
        data.month.optionData = [];//重置
        data.year.xData = [];//重置
        data.year.optionData = [];//重置
        let resData = res.data.data;
        data.all = resData.count[0].totalRows;
        data.week.inc = resData.count[0].thisWeekInc;
        data.month.inc = resData.count[0].thisMonthInc;
        data.year.inc = resData.count[0].yearInc;
        resData['7_charts'].forEach((elem) => {
          data.week.xData.push(String(elem.sj).substr(4).replace(/^0/,'').replace(/(\d{2}$)/,'-'+'$1').replace(/-0/,'-'));
          data.week.optionData.push(elem.total);
        })
        resData['30_charts'].forEach((elem) => {
          data.month.xData.push(String(elem.sj).substr(4).replace(/^0/,'').replace(/(\d{2}$)/,'-'+'$1').replace(/-0/,'-'));
          data.month.optionData.push(elem.total);
        })
        resData['year_charts'].forEach((elem) => {
          data.year.xData.push(elem.sj);
          data.year.optionData.push(elem.total);
        })
      })
    },
    //汽运购票
    getCompositeData(tableName,data){
      tableApi(tableName).then((res) => {
        if(Object.keys(res.data.data).length <= 0) return;
        data.date = [];
        data.allData = [];
        data.insideData = [];
        data.outsideData = [];
        let resData = res.data.data.charts;
        resData.forEach((elem) => {
          data.date.push(String(elem.sj).substr(4).replace(/^0/,'').replace(/(\d{2}$)/,'-'+'$1').replace(/-0/,'-'));
          data.allData.push(elem.zs);
          data.insideData.push(elem.sn);
          data.outsideData.push(elem.sw);
        })
      })
    },
    //汽车卡口数据
    getkakouData(){
      kakouApi().then((res)=>{
        this.busData.date = [];
        this.busData.allData = [];
        this.busData.insideData = [];
        this.busData.outsideData = [];
        let resData = res.data.result;
        if(this.flag === true){
          this.rescounts = this.rescounts + Number(resData[0].gczl);
          this.flag = false;
        }
        resData.forEach((elem) => {
          this.busData.date.unshift(String(elem.gcsj).substr(5).replace(/^0/,'').replace(/-0/,'-'));
          this.busData.allData.unshift(elem.gcrzl);
          this.busData.insideData.unshift(elem.jmjgcrzl);
          this.busData.outsideData.unshift(elem.fjmjgcrzl);
        })
      })
    },
    //常住人口
    getCZRKdata(tableName,data){
      tableApi(tableName).then((res) => {
        if(Object.keys(res.data.data).length <= 0) return;
        let resData = res.data.data;
        data.all = resData.count[0].total;
        resData.charts.forEach((elem) => {
          switch (elem.dqdm){
            case '440781' :
            data.taishan = (elem.total / 10000).toFixed(1);
            break;
            case '440705' :
            data.xinhui = (elem.total / 10000).toFixed(1);
            break;
            case '440783' :
            data.kaiping = (elem.total / 10000).toFixed(1);
            break;
            case '440784' :
            data.heshan = (elem.total / 10000).toFixed(1);
            break;
            case '440785' :
            data.enping = (elem.total / 10000).toFixed(1);
            break;
            case '440703' :
            data.pengjiang = (elem.total / 10000).toFixed(1);
            break;
            case '440704' :
            data.jianghai = (elem.total / 10000).toFixed(1);
            break;
            default :
            console.log('fasle');
          }
        })
      })
    },
    //资源概况
    getResourceData(tableName){
      resourceApi().then((res) => {
        if(Object.keys(res.data.data).length <= 0) return;
        let resData = res.data.data;
        //资源概况
        this.restype = resData.DataSourceSolution.tblNums;
        this.rescounts = this.rescounts + resData.DataSourceSolution.totalRowNums;
      })
      tableApi(tableName).then((res)=>{
        if(Object.keys(res.data.data).length <= 0) return;
        let resData = res.data.data;
        if(resData.count[0].total > 10000000){
            this.resnew.value = this.formatfloat(resData.count[0].total/10000000);
            this.resnew.unit = '千万'
          }else if(resData.count[0].total > 10000){
            this.resnew.value = this.formatfloat(resData.count[0].total/10000);
            this.resnew.unit = '万'
          }else {
            this.resnew.value = this.formatNum(resData.count[0].total);
            this.resnew.unit = '个'
          }
      })
    },
    //日更新前五
    getTopFiveData(tableName){
      tableApi(tableName).then((res) => {
        if(Object.keys(res.data.data).length <= 0) return;
        let resData = res.data.data.count;
        this.tableData = resData.map((elem)=> {
          let item = {};
          item.value = elem.inctotal;
          item.type = elem.tbldesc;
          return item;
        })
      })
    },
    //近30天警情
    get30caseData(tableName){
      tableApi(tableName).then((res) => {
        if(Object.keys(res.data.data).length <= 0) return;
        this.caseData.legend = [];
        this.caseData.data = [];
        let resData = res.data.data;
        resData.charts.forEach((elem) => {
          let item = {};
          let _name = this.translate[String(elem.jslb)];
          this.caseData.legend.push(_name);
          item.value = elem.total;
          item.name = _name;
          this.caseData.data.push(item);
        })
      })
    },
    //定时任务
    timeTask(){
      // 国内旅客
      this.getleftLinedata('dw.dws_a_vw_zc_sj_lygnlk',this.guestData);
      //网吧人员
      this.getleftLinedata('dw.dws_a_t_ap_wj_wbt_swryswjl',this.internetData);
      //汽运购票
      this.getCompositeData('dw.dws_a_v_jmqcgp_jwss',this.transportData);
      // 全市过车数据
      this.getkakouData();
      this.getTopFiveData('rgxqw');
    }
  },
  created(){
    // 国内旅客
    this.getleftLinedata('dw.dws_a_vw_zc_sj_lygnlk',this.guestData);
    //网吧人员
    this.getleftLinedata('dw.dws_a_t_ap_wj_wbt_swryswjl',this.internetData);
    //汽运购票
    this.getCompositeData('dw.dws_a_v_jmqcgp_jwss',this.transportData);
    // 全市过车数据
    this.getkakouData();
    //常住人口
    this.getCZRKdata('dw.dws_a_v_czrk_jbxx_2_zc',this.personData);
    //资源概况和日更新前五
    this.getResourceData('rgxzl');
    this.getTopFiveData('rgxqw');
    //近30天警情
    this.get30caseData('dw.dws_a_v_yb_asj_jq');
    let timeout;
    timeout = setInterval(() => {
      this.timeTask()
    }, 1800000);
  }
}
</script>

<style lang="scss">
@import '../assets/sass/layout.scss';
@import '../assets/sass/tools.scss';
@import '../assets/sass/background.scss';
//element-ui
.el-radio__inner {
  width: 10px;
  height: 10px;
}
.header {
  background: url('../assets/img/header-bg.png') center 0px no-repeat;
  background-size: 100% 98%;
  position: relative;
}
.container {

  .left,.center,.right {

  }
  // 左区域
  .left{
    .guest,.internet,.transport{
      width: 96%;
      height: 31%;
      margin: 0 auto;
      margin-top: 20px;
      // border:1px solid #fff;
    }
    .countArea {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: 70px;
      padding: 24px 36px 0 36px;
      .counts{
        display: inline-block;
        border: 1px solid rgba(73, 217, 254, 0.3);
        padding: 4px;
        p {
          font-size: 14px;
          color: #fff;
          &:first-child{
            padding-bottom: 4px;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
          }
          &:last-child{
            padding-top: 4px;
          }
          span {
            font-size: 10px;
          }
          span.num {
            font-size: 14px;
            color : #22e3da
          }
        }
      }
      .radios {
        position: absolute;
        right: 26px;
        top: 32px;
        .el-radio {
          margin-left: 10px;
        }
        .el-radio__label {
          color:#fff;
          font-size: 10px;
          padding-left: 4px;
        }
        .el-radio__inner {
          background-color: #0055a9;
          border : none;
        }
      }

      // background-color: yellow;
    }
  }
  // 中间区域
  .center {

    .maps,.busData {
      width: 96%;
      height: 65%;
      margin: 0 auto;
      margin-top: 20px;
    }
    .maps {
      .title{
        width: 90%;
        height: 20%;
        margin: 0 auto;
        padding-top: 20px;
        .descript {
            display: inline-block;
            height:50px;
            line-height: 50px;
            border: solid 1px #004986;
          span{
            font-size: 16px;
            height: 26px;
            padding: 0 5px;
            color : #fff;
            background-color: #004986;
          }
        }
        .counts {
          display: inline-block;
          width: 180px;
          height: 50px;
          line-height: 50px;
          vertical-align: top;
          margin-left: 2px;

          font-size: 24px;
          // font-family: myFont,sans-serif;
          letter-spacing: 11px;
          text-indent: 7px;
          text-align: center;
          color : #fff;

          border: solid 1px #004986;
          background: url('../assets/img/population.png');
          background-size : 100% 100%;
          background-position: center 4px;
        }

      }
      .mapArea {
        width: 90%;
        height:70%;
        background: url('../assets/img/map-bg.png');
        background-size: 100% 100%;
        margin : 0 auto;
        position: relative;
        .unit {
          font-size: 12px;
        }
        .enping,.kaiping,.taishan,.xinhui,.heshan,.jianghai,.pengjiang {
          position: absolute;
          color : #fcff00;
          font-size: 14px;
        }
        .kaiping {
          top: 20%;
          left: 39%;
        }
        .enping {
          top: 24%;
          left: 15%;
        }
        .taishan {
          top : 30%;
          left : 58%;
        }
        .heshan {
          margin-top: -11px;
          left: 62%;
        }
        .xinhui {
          top :2%;
          left: 73%;
        }
        .pengjiang {
          margin-top: -18px;
          left: 80%;
        }
        .jianghai {
          top : 3%;
          left :88%;
        }
      }
    }
    .busData {
      height: 31%;
    }
  }
  // 右区域
  .right {
    .resources,.top5,.cases {
      width: 96%;
      height: 31%;
      margin: 0 auto;
      margin-top: 20px;
    }
    .resources {

      ul.resList {
        display: flex;
        justify-content: center;
        padding-top: 30px;
        li.item {
          width: 28%;
          position: relative;
          &:nth-child(2){
            margin: 0 12px;
          }
          p {
            position: absolute;
            margin-left: 50%;
            transform:translateX(-50%);
          }
          .num {
            font-size: 24px;
            color : #ffae00;

            margin-top: 34%;
          }
          .small {
            font-size: 12px;
            color : #ffae00;
            margin-top: 58%;
          }
          .des {
              width: 130px;
              text-align: center;
              font-size: 14px;
              color: #fff;
              bottom: 0;
              margin-bottom: -26px;
          }

          .lf_animation,.rt_animation,.no_animation{
            width: 100%;
            height: 100%;
            position: absolute;
            background-size: contain;
          }
          .lf_animation {
            background-image: url('../assets/img/in.png');
            // background-image: url('../assets/img/middle.png');
            // animation-name: anticlockwise_30;
            // animation-iteration-count: infinite;
            // animation-timing-function: linear;
            // animation-duration: 6s;
          }
          .rt_animation {
            // background-image: url('../assets/img/in.png');
            background-image: url('../assets/img/middle.png');
            // animation-name: clockwise;
            // animation-iteration-count: infinite;
            // animation-timing-function: linear;
            // animation-duration: 12s;
          }
          .no_animation{
            background-image: url('../assets/img/out.png');
          }
        }
        .restype{
          .lf_animation{
            background-image: url('../assets/img/in.png');
            // background-image: url('../assets/img/middle.png');
            animation-name: anticlockwise_30;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-duration: 6s;
          }
          .rt_animation{
            // background-image: url('../assets/img/in.png');
            background-image: url('../assets/img/middle.png');
            animation-name: clockwise_30;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-duration: 12s;
          }
        }
        .rescounts{
          .lf_animation{
            background-image: url('../assets/img/in.png');
            // background-image: url('../assets/img/middle.png');
            animation-name: anticlockwise_90;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-duration: 6s;
          }
          .rt_animation{
            // background-image: url('../assets/img/in.png');
            background-image: url('../assets/img/middle.png');
            animation-name: clockwise_90;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-duration: 12s;
          }
        }
        .resnew{
          .lf_animation{
            background-image: url('../assets/img/in.png');
            // background-image: url('../assets/img/middle.png');
            animation-name: anticlockwise_120;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-duration: 6s;
          }
          .rt_animation{
            // background-image: url('../assets/img/in.png');
            background-image: url('../assets/img/middle.png');
            animation-name: clockwise_120;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-duration: 12s;
          }
        }
        .item::before {
          content: ' ';
          padding-top: 100%;
          float: left;
        }
        .item::after {
          content: ' ';
          display: block;
          clear: both;
        }
      }

    }
    .top5 {
      position: relative;
      .tableContainer {
        width: 90%;//需要响应式
        padding-top: 30px;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  //媒体查询
  @media screen and (max-width:1400px) {
    .left,.center,.right {

    }
    .service_icon{
      margin: 0;
    }
    .left {
     .countArea {
       padding-left: 20px;
     }
    }
    .center {

    }
    .right {
    }
  }
  @media screen and (max-height:768px) {
    .left,.center,.right {

    }

    .left {

    }
    .center {

    }
    .right {
      .resources {
        height: 28%;
        ul.resList {
          padding-top : 25px;
          li.item {
            width : 25%;
            .num {
              font-size: 20px;
            }
          }
        }
      }
      .top5 {
        height: 34%;
        margin-top: 18px;
      }
    }
  }
  // @font-face {
  //     font-family: myFont;
  //     src: url('../assets/font/CTLaoSongSJ.ttf');
  // }
  //动画效果
  //顺时针
  // -30度开始
  @keyframes clockwise_30 {
    from {
      transform: rotateZ(45deg);
    }
    to {
      transform: rotateZ(405deg);
    }
  }
  //逆时针
  @keyframes anticlockwise_30 {
    from {
      transform: rotateZ(390deg);
    }
    to {
      transform: rotateZ(30deg);
    }
  }
  //  90度开始
  @keyframes clockwise_90 {
    from {
      transform: rotateZ(90deg);
    }
    to {
      transform: rotateZ(450deg);
    }
  }
  //逆时针
  @keyframes anticlockwise_90 {
    from {
      transform: rotateZ(450deg);
    }
    to {
      transform: rotateZ(90deg);
    }
  }
  //  120度开始
  @keyframes clockwise_120 {
    from {
      transform: rotateZ(140deg);
    }
    to {
      transform: rotateZ(500deg);
    }
  }
  //逆时针
  @keyframes anticlockwise_120 {
    from {
      transform: rotateZ(500deg);
    }
    to {
      transform: rotateZ(140deg);
    }
  }
}
</style>
